<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(0, 0, 0);
        }
        .box img{
            border: 1px solid white;
            width: 100%;
            height: 100%;
        }
        .box {
            margin-top: 0px;
        }
        .row{
            width: 1100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <script src="./js/jquery.min.js"></script>

    <div class="container">
        <ul class="row">
            <li class="box col-sm-2"><img src="./imgs/京剧01.png" ></li>
            <li class="box col-sm-2"><img src="./imgs/京剧02.png" ></li>
            <li class="box col-sm-2"><img src="./imgs/京剧03.png" ></li>
            <li class="box col-sm-2"><img src="./imgs/京剧04.png" ></li>
            <li class="box col-sm-2"><img src="./imgs/京剧05.png" ></li>
            <li class="box col-sm-2"><img src="./imgs/京剧06.png" ></li>
        </ul>
       
    </div>

<script>
    $(function(){
        let len = $('li').length;
       for (var i = 0; i < len ; i++){
           $('li').eq(i).animate({
                    marginTop:500,
                    opacity:0.5
              })
       }
        
    })
        
</script>
</body>
</html>